<!-- BEGIN PAGE CONTENT-->
<div class="row">
    <div class="col-md-12">
        <nav id="tools" class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse1">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">{{ model_verbose_name }}</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse1">
                <ul class="nav navbar-nav">
                    {% for action in actions %}
                        <li class="active"><a href="return false" id="{{ grid_name }}_action_{{ action.name }}">{{ action.title }}</a></li>
                        {{ action.render | safe }}
                    {% endfor %}
                </ul>
            </div>
        </nav>
        <div class="modal fade bs-modal-lg" id="filter_{{ grid_name }}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="portlet box green">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-search"></i> 查找
                                </div>
                            </div>
                            <div class="portlet-body form">
                                <form role="form" class="form-horizontal" id="search_form">
                                    <div class="form-body">
                                        {% for column in columns %}
                                            {{ column.search_render | safe }}
                                        {% endfor %}
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn default" data-dismiss="modal">放弃</button>
                        <button type="button" class="btn green" id="post_search">确定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <div class="modal fade bs-modal-lg" id="editor_{{ grid_name }}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="portlet box green">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-edit"></i><span id="editor_title">编辑</span>
                                </div>
                            </div>
                            <div class="portlet-body form">
                                <form role="form" class="form-horizontal" id="editor_form">
                                    <div class="form-body">
                                        {% for column in columns %}
                                            {{ column.edit_render | safe }}
                                        {% endfor %}
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn default" data-dismiss="modal">放弃</button>
                        <button type="button" class="btn green" id="post_search">确定</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <table id="table_{{ grid_name }}" class="table table-striped table-bordered" width="100%"
               cellspacing="0">
            <thead>
            <tr>
                {% for item in columns %}
                    {% ifnotequal item.field.name 'id' %}
                        <th>{{ item.verbose_name }}</th>
                    {% endifnotequal %}
                {% endfor %}
            </tr>
            </thead>
        </table>
    </div>
</div>
<script type="text/javascript">
$(function(){
    var $table_{{ grid_name }} = $("#table_{{ grid_name }}").DataTable({
        dom: "<'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
        //dom :"Bfrtip",
        bDeferRender : true,
        lengthChange: true,
        processing: true,
        serverSide: true,
        scrollY: "351px",
        scrollCollapse: false,
        filter: false,
        displayLength: 30,
        searching: false,
        "lengthMenu": [
            [50, 100, 150, 200, 250, 300, 400, 500, 600, -1],
            [50, 100, 150, 200, 250, 300, 400, 500, 600, "All"] // change per page values here
        ],
         oLanguage : {
            "oAria": {
                "sSortAscending": ": 升序排列",
                "sSortDescending": ": 降序排列"
            },
            "oPaginate": {
                "sFirst": "首页 ",
                "sLast": " 末页",
                "sNext": " 下页",
                "sPrevious": "上页 "
            },
            "sEmptyTable": "没有相关记录",
            "sInfo": "第 _START_ 到 _END_ 条记录，共 _TOTAL_ 条",
            "sInfoEmpty": "第 0 到 0 条记录，共 0 条",
            "sInfoFiltered": "(从 _MAX_ 条记录中检索)",
            "sInfoPostFix": "",
            "sDecimal": "",
            "sThousands": ",",
            "sLengthMenu": "每页显示条数: _MENU_",
            "sLoadingRecords": "正在载入...",
            "sProcessing": "正在载入...",
            "sSearch": "搜索:",
            "sSearchPlaceholder": "",
            "sUrl": "",
            "sZeroRecords": "没有相关记录"
        },
        "sPaginationType": "full_numbers",
        ajax: {
            url: {% block data_url %}"/base/datas/{{ model_pk }}/"{% endblock %},
            type: "post",
            data: function (d) {
                var arr = $("#search_form").serializeArray()
                for (index in arr) {
                    d[arr[index].name] = arr[index].value
                }
            }
        },
        columns: [
            {% for column in columns %}
                {{ column.column_render | safe }}
                {% if forloop.last %}{% else %},{% endif %}
            {% endfor %}
        ],
        'aaSorting': [
            {% for column in columns %}
                {% if column.ordering %}
                    [{{ forloop.counter0 }}, '{{ column.direction }}']
                    {% if forloop.last %}{% else %},{% endif %}
                {% endif %}
            {% endfor %}
        ],
        select: true,
        buttons: true
    });

    var set_h = function(v=0){
        var $wrapper = $("#table_{{ grid_name }}_wrapper")
                height = $("#content_panel").height()-$("#tools").height()-$wrapper.find(".dataTables_scrollHead").height()-$($wrapper.children()[1]).height()
        $("#table_{{ grid_name }}_wrapper .dataTables_scrollBody").height(height-v)
    }
    $(window).resize(function(){
       set_h()
    })
    set_h(15)
})
</script>